<template>
  <view class="address">
    <view class="no_address" v-if="!address.cityName">
      <button size="mini" type="primary" @click="btnClick">请选择收货地址+ </button>
    </view>
    <view class="has_address" v-else @click="btnClick">
      <view class="top">
        <view class="left">
          收货人：{{address.userName}}
        </view>
        <view class="right">
          电话：{{address.telNumber}} >
        </view>
      </view>
      <view class="bottom">
        收货地址：{{address.provinceName}}{{address.cityName}}{{address.countyName}}{{address.detailInfo}}
      </view>
    </view>
    <image class="myimg" src="../../static/images/cart_border@2x.png" mode="widthFix"></image>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    name: "my-address",
    data() {
      return {

      };
    },
    computed: {
      ...mapState('user', ['address'])
    },
    methods: {
      ...mapMutations('user', ['setAddress']),
      async btnClick() {
        const res = await uni.chooseAddress()
        this.setAddress(res)
        console.log('收货地址', res);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .address {
    .no_address {
      height: 200rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .has_address {
      font-size: 12px;
      padding: 0 20rpx;
      line-height: 80rpx;

      .top {
        display: flex;
        justify-content: space-between;

        .left {}

        .right {}
      }

      .bottom {}
    }

    .myimg {
      width: 100%;
      display: block;
    }
  }
</style>